var header = Vue.component('my-header', { 
    template: '#header-tem',
    data: function(){
        return {
            header: '小红柜',
        }
    }
});
var footer = Vue.component('my-footer', { 
    template: '#footer-tem',
    data: function(){
        return {
            service_hotline: '123456',
        }
    } 
});
var service_intro = Vue.component('service-intro', {
    template: '#service-intro-tem',
    data: function(){
        return {
            service_introduction: [
                '存取物品是小红柜提供给用户的主要功能。',
                '如何寄存：点击寄存物品，选择寄存柜大小，扫描微信、支付宝二维码付费，柜门打开，存入物品，关闭柜门。',
                '如何取：点击取出物品，扫描微信、支付宝二维码，结算费用，柜门打开，取出物品，关闭柜门。',
            ]
        }
    }
});
var deposit_disp = Vue.component('deposit-display', {
    template: '#deposit-display-tem',
    data: function(){
        return {
            big_cage_remain: 11,
            small_cage_remain: 11,
            big_cage_size: 50,
            small_cage_size: 40,
        }
    },
    methods: {
        makeDeposit: function(){
            this.$router.push('pay');
        }
    }
});
var service_disp = Vue.component('service-display', {
    template: '#service-display-tem',
    data: function(){
        return {
            cages_remain: 22
        }
    },
    computed: {
        cages_remain: function(){
            console.log(deposit_disp.big_cage_remain)
        },
    },
    methods: {
        wannaDeposit: function(){
            this.$router.push('/deposit');
        },
        wannaWithdraw: function(){
            this.$router.push('/withdraw');
        }
    }
});
var pay_standard = Vue.component('pay-standard', {
    template: '#pay-standard-tem',
    data: function(){
        return {
            pay_standards: [
                '大寄存柜每小时收费3元，超过8小时，以一天计费，每天收费24元，超过48小时，您没有取走您的物品，我公司有权处理您寄存的物品。',
                '小寄存柜每小时收费2元，超过8小时，以一天计费，每天收费16元，超过48小时，您没有取走您的物品，我公司有权处理您寄存的物品。',
                '寄存物品重量不要超过10公斤。',
                '贵重物品请随身携带，不要寄存。',
            ]
        }
    }
});
var indication_exp = Vue.component('indication-explain', {
    template: '#indication-explain-tem',
    data: function(){
        return {
            indications: [
                '需要预支付寄存柜的一小时的寄存费用。',
                '需要您提供身份证信息。',
            ]
        }
    }
});
var payment_info = Vue.component('payment-information', {
    template: '#payment-information-tem',
    data: function(){
        return {
            payment_info: {
                username: 'Zero',
                withdraw_time: new Date(),
                deposit_time: new Date(),
                cage_size: '大',
                consume_amount: '100',
                payment_amount: '100',
            }
        }
    }
});

const MainFrame = { template: '#main-frame',
    methods: {
        wannaMaintain: function(){
            this.$router.push('/maintain');
        }
    } 
};
const DepositService = { template: '#deposit-service' };
const WithdrawService = { template: '#withdraw-service' };
const PaymentService = { template: '#payment-service' };
const MaintainService = { template: '#maintain-service' };

const routes = [
    { path: '/', component: MainFrame },
    { path: '/deposit', component: DepositService },
    { path: '/withdraw', component: WithdrawService },
    { path: '/pay', component: PaymentService },
    { path: '/maintain', component: MaintainService},
]
const router = new VueRouter({ routes });
const app = new Vue({ router }).$mount('#app');